<template>
  <div>
    <div class="classifyOfPrice">
      <div
        class="item"
        v-for="(item,index) in info.slice(0,3)"
        :key="'info_'+index"
        :style="index<2?'margin-bottom: 5px;':''"
      >
        <el-tag
          size="small" style="margin-right:5px;"
          :type="item.workerCategoryState=='YES'?'success':'danger'"
        >{{item.workerCategoryState|filterUserState}}</el-tag>
        <span class="name">{{item.serviceCategoryFullName}}：</span>
        <span class="price">{{ item.price | filterPriceFormat }}</span>
      </div>
      <el-link type="primary" v-if="info.length>3" @click="trigger">展开</el-link>
    </div>
    
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    info: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  mounted() {},
  methods: {
    trigger(){
      this.$emit('trigger')
    }
  }
};
</script>
<style scoped lang='scss'>
.classifyOfPrice {
  max-height: 100px;
  overflow: hidden;
  text-align: left;

  .el-link {
    padding-left: 30px;
  }
}
.content{
  max-height: 600px;
  overflow: auto;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>